<template>
  <div class="alert-view">
    <div class="alert-container">
      <div class="alert-header">
        <h2>{{ currentAlert?.title }}</h2>
      </div>
      <div class="alert-body">
        <p>{{ currentAlert?.content }}</p>
        <div class="alert-time">
          {{ currentAlert ? new Date(currentAlert.createdAt).toLocaleString() : '' }}
        </div>
      </div>
      <div class="alert-actions">
        <button class="close-btn" @click="handleClose">
          关闭提醒
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useAppStore } from '../store'

const route = useRoute()
const store = useAppStore()
const currentAlert = ref(null)

// 获取当前提醒ID
const getAlertId = () => {
  return route.query.id
}

// 查找当前提醒
const findCurrentAlert = () => {
  const alertId = getAlertId()
  if (alertId) {
    currentAlert.value = store.activeAlerts.find(alert => alert.id === alertId)
  }
}

// 关闭提醒
const handleClose = () => {
  if (currentAlert.value) {
    store.closeAlert(currentAlert.value.id)
    // 在Electron中关闭窗口
    window.close()
  }
}

// 监听路由变化
watch(
  () => route.query.id,
  () => {
    findCurrentAlert()
  }
)

// 监听活跃提醒变化
watch(
  () => store.activeAlerts,
  () => {
    findCurrentAlert()
  }
)

// 组件挂载时
onMounted(() => {
  findCurrentAlert()

  // 播放提醒声音
  if (store.settings.alertSound) {
    const audio = new Audio('/alert-sound.mp3')
    audio.play().catch(e => console.log('无法播放声音:', e))
  }

  // 如果支持震动且开启了震动提醒
  if (store.settings.alertVibration && 'vibrate' in navigator) {
    navigator.vibrate([200, 100, 200, 100, 200])
  }
})
</script>

<style scoped>
.alert-view {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
}

.alert-container {
  background-color: white;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  animation: popIn 0.3s ease-out;
}

@keyframes popIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.alert-header {
  background-color: #e74c3c;
  color: white;
  padding: 1rem;
  text-align: center;
}

.alert-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.alert-body {
  padding: 1.5rem;
}

.alert-body p {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #34495e;
}

.alert-time {
  font-size: 0.9rem;
  color: #7f8c8d;
  text-align: right;
}

.alert-actions {
  padding: 1rem;
  background-color: #f5f5f5;
  text-align: center;
}

.close-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background-color: #2980b9;
}
</style>
